import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入vuex实例 store ===页面中的this.$stor
import store from '../store'

// import Login from '../views/login'
// 这样导入是按需导入
// const Login = () => import('../views/login')

// 按需导入组件
// 布局组件(一) 布局组件(公共的头部+router-view(二级路由挂载点)+菜单
const Layout = () => import('@/views/layout.vue')
// 首页（第一个标签页）二级路由
const Index = () => import('@/views/home/index.vue')
// 问答
const Question = () => import('@/views/question/index.vue')
// 视频
const Video = () => import('@/views/video/index.vue')
// 个人中心
const Profile = () => import('@/views/profile/index.vue')
// 登录一级路由
const Login = () => import('@/views/login/index.vue')
// 编辑个人资料
const User = () => import('@/views/user/edit.vue')
// 小智
const Chat = () => import('@/views/user/chat.vue')
// 搜索
const Search = () => import('@/views/search/index.vue')
const Result = () => import('@/views/search/result.vue')
// 详情
const Article = () => import('@/views/article/index.vue')

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    // 布局骨架
    component: Layout,
    // 二级路由
    children: [
      {
        path: '/',
        name: 'index',
        // 首页
        component: Index
      },
      {
        path: '/question',
        name: 'question',
        // 问答
        component: Question
      },
      {
        path: '/video',
        name: 'video',
        // 视频
        component: Video
      },
      {
        path: '/user',
        name: 'user',
        // 个人中心
        component: Profile
      }
    ]
  },
  // 以及路由
  {
    path: '/login',
    name: 'login',
    // 登录
    component: Login
  },
  {
    path: '/user/profile',
    name: 'profile',
    // 编辑资料
    component: User
  },
  {
    path: '/user/chat',
    name: 'chat',
    // 小智同学
    component: Chat
  },
  {
    path: '/search',
    name: 'search',
    // 搜索
    component: Search
  },
  {
    path: '/search/result',
    name: 'result',
    // 搜索结果
    component: Result
  },
  {
    path: '/article/:id',
    name: 'article',
    // 文章详情
    component: Article
  }
]

const router = new VueRouter({
  routes
})

// 添加前门保安 => 需求:控制'/user'开头的页面需要有token才能访问,如果没有跳转到登录
/**
 *to去哪/上次(也可以说是当次)
 *form从哪来/上上次
 next(方法)方行
 */
router.beforeEach((to, form, next) => {
  // 因为import store from '../store'里面的state是个对象,所以可以加结构user,把里面的user提取出来
  // const { user } = store.state:store实例然后.state取出里面的user
  const { user } = store.state
  // to.path.startsWith('/user'):匹配到是否以/user开头
  if (to.path.startsWith('/user') && !user.token) {
    // 是用户相关页面,没有token,然后怎么办?跳转登录
    // 需求:把当前访问的没登录页面path当做参数(to.path),带到登录页. 为什么带到登录页呢?=>登陆成功后跳到上次访问的页面(也可以这样理解,别人正在用着咱们的网络,但是没登录或者登录失效了,那么要把他上次登录的网页浏览记录(to.puth)一起带到登录页,这样登录成功后直接返回上次浏览的网页)
    //
    next(`/login?redurectUrl=${to.path}`)
  } else {
    // 有token,方行
    // next() == router.push一样也可以跳页面

    next()
  }
})

export default router
